<template>
  <div>
    <Title title="计时设置" />
    <div class="baseSet">
      <p>基础设置</p>

      <van-cell center title="计时屏幕常亮">
        <template #right-icon>
          <van-switch v-model="setScreen" size="30" />
        </template>
      </van-cell>

      <van-cell center title="禁用背景动画">
        <template #right-icon>
          <van-switch v-model="setBackMove" size="30" />
        </template>
      </van-cell>

      <van-cell center title="暂停时间限制">
        <template #right-icon>
          <van-switch v-model="setTimeRestrictions" size="30" />
        </template>
      </van-cell>
    </div>

    <div class="timeSet">
      <p>计时结束设置</p>
      <van-cell center title="结束提示音">
        <template #right-icon>
          <van-switch v-model="setSound" size="30" />
        </template>
      </van-cell>

      <van-cell center title="持续提醒">
        <template #right-icon>
          <van-switch v-model="setConstantSound" size="30" />
        </template>
      </van-cell>

      <van-cell center title="计时完成后休息时长">
        <template #right-icon>
          <van-switch v-model="setRest" size="30" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import Title from "../../../components/my/Title";
export default {
  components: {
    Title,
  },
  data() {
    return {
      // 计时屏幕常亮
      setScreen: false,
      // 禁用背景动画
      setBackMove: false,
      // 暂停时间限制
      setTimeRestrictions: false,
      // 结束提示音
      setSound: false,
      // 持续提醒
      setConstantSound: false,
      // 计时完成后休息时长
      setRest: false,
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
div {
  font-size: 28px;

  .baseSet {
    width: 594px;
    margin-left: 88px;
    margin-bottom: 30px;
    p{
      font-size: 32px;
      margin-bottom: 19px;
    }
    
  }
  .timeSet {
    width: 594px;
    margin-left: 88px;
     p{
      font-size: 32px;
      margin-bottom: 19px;

    }
  }
}
</style>
